<template>
  <v-container fluid fill-height class="statistics-wrapper">
<v-layout row wrap justify-center>
      <v-flex md8 sm10 xs12 mb-3>
        <v-layout row class="pt-3">
          <v-flex md6>
            <v-btn icon @click="$router.go(-1)">
              <v-icon>arrow_back</v-icon>
            </v-btn>
          </v-flex>
          <v-flex md6 headline d-flex justify-center>
            <span>{{pageTitle}}</span>
          </v-flex>
        </v-layout>
        <v-divider></v-divider>
      </v-flex>
      <v-flex md8 sm10 xs12>
        <v-layout column>
          <v-flex md8 xs12 class="px-2 mb-3">
            <v-card color="white">
              <v-card-title class="title card-title-bg">
                <v-icon>attach_file</v-icon>
                <span class="mx-2">需求信息 </span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="title">
                <v-layout row align-baseline justify-center>
                  <v-flex md3 xs4>
                    <span>需求名称</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <v-text-field hide-details disabled name="input-3" single-line v-model="editItem.demand.demandName"></v-text-field>
                  </v-flex>
                </v-layout>

                <v-layout row align-baseline justify-center>
                  <v-flex md3 xs4>
                    <span>项目名称</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <v-select disabled hide-details :items="projectItems" v-model="editItem.demand.projectName"></v-select>
                  </v-flex>
                </v-layout>

                <v-layout row align-baseline justify-center>
                  <v-flex md3 xs4>
                    <span>需求负责人</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <v-text-field disabled hide-details name="input-3" single-line v-model="editItem.demand.demandHead"></v-text-field>
                  </v-flex>
                </v-layout>

                <!-- <v-layout row align-baseline justify-center>
                  <v-flex md3 xs4>
                    <span>所属部门</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <v-select :items="departmentItems" v-model="editItem.demand.department"></v-select>
                  </v-flex>
                </v-layout> -->

                <v-layout row align-baseline justify-center v-if="showTime">
                  <v-flex md3 xs4>
                    <span>提交时间</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <!-- <v-menu ref="dateMenu1" :close-on-content-click="false" v-model="dateMenu1" :nudge-right="40" lazy transition="scale-transition"
                      offset-y full-width max-width="290px" min-width="290px">
                      <v-text-field slot="activator"  mask="####-##-##" v-model="editItem.demand.createTime" label="请填写日期" hint="年年年年/月月/日日" persistent-hint prepend-icon="event"></v-text-field>
                      <v-date-picker locale="zh-cn" v-model="editItem.demand.createTime" no-title @input="dateMenu1 = false"></v-date-picker>
                    </v-menu> -->
                    <v-text-field disabled hide-details mask="####-##-## ##:##" v-model="editItem.demand.createTime" label="" hint="年年年年-月月-日日" persistent-hint prepend-icon="event"></v-text-field>
                  </v-flex>
                </v-layout>

                <v-layout row align-baseline justify-center v-if="showTime">
                  <v-flex md3 xs4>
                    <span>完成时间</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <v-text-field disabled hide-details mask="####-##-## ##:##" v-model="editItem.demand.deadTime" label=""  persistent-hint prepend-icon="event"></v-text-field>
                  </v-flex>
                </v-layout>

                <v-layout row align-baseline justify-center>
                  <v-flex md3 xs4>
                    <span>需求详情</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <v-textarea hide-details name="input-3" outline v-model="editItem.demand.demandDetails"></v-textarea>
                  </v-flex>
                </v-layout>

                <v-layout row align-baseline justify-center>
                  <v-flex md3 xs4>
                    <span>需求附件</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <form id="upload-form" enctype="multipart/form-data" method="post" class="drop-file text-md-center cursor">
                      <span d-flex align-center>
                        <v-icon size="30">cloud_upload</v-icon>
                        <span class="subheading">{{demandFileName}}</span>
                      </span>
                    </form>
                  </v-flex>
                </v-layout>

              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex v-for="(item, i) in editItem.versionList" :key="i" md8 xs12 class="px-2 my-2" v-if="$route.query.type !== 'add'">
            <v-card color="white">
              <v-card-title class="title card-title-bg">
                <v-icon>update</v-icon>
                <span class="mx-2">工作记录</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="title">
                <v-layout row align-baseline justify-center>
                  <v-flex md3 xs4>
                    <span>版本号</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <v-text-field disabled hide-details name="versionNumber" v-model="item.versionNumber" single-line></v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row align-baseline justify-center v-if="showTime">
                  <v-flex md3 xs4>
                    <span>提交时间</span>
                  </v-flex>
                  <v-flex md6 xs8>
                      <v-text-field disabled mask="####-##-## ##:##" v-model="item.createTime" label=""  persistent-hint prepend-icon="event"></v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row align-baseline justify-center class="mb-2">
                  <v-flex md3 xs4>
                    <span>版本负责人</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <v-text-field disabled hide-details name="director" v-model="item.director" single-line></v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row align-baseline justify-center>
                  <v-flex md3 xs4>
                    <span>版本记录</span>
                  </v-flex>
                  <v-flex md6 xs8>
                    <v-textarea hide-details name="record" v-model="item.content" outline></v-textarea>
                  </v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>


    </v-layout>
  </v-container>
</template>

<script>
import * as version from '../../api/version'
import * as demand from "../../api/demand"

import { getTime, getTimeFromString, parseDate, getDateFromString, parseDateTime } from "../../util";
export default {
  data: () => ({
    dialog: false,
    modal: false,
    modalText: "",
    projectItems: [],
    departmentItems:[],
    dayData: {},
    showTime: false,
    showButton: false,
    pageTitle: '',
    editItem: {
      demand: {},
      versionList:{}
    },
    projTypesItems: {
      '0': '无',
      '1': '客户端',
      '2': '服务端',
    },
    demandFileName: ''
  }),
  mounted() {
    let type = this.$route.query.type
    this.showTime = type !== 'add'
    this.showButton = type !== 'details'
    if(type == 'details') {
      this.pageTitle = '版本详情'
    }
    this.getVersionDetails();
    this.getProjectList()
    this.getDepartmentList()
  },
  watch: {
    // 监测路由参数变化
    $route(to, from) {
      console.log(to.params.gametype);
    }
  },
  filters: {

  },
  methods: {
    getTime,
    getProjectList() {
      demand.getProjectList.r().then(({ data }) => {
        let d = data.data;
        if (data.result == 0) {
          let projects = [];
          _.forEach(d.dataList, (item, i)=>{
            projects.push({
              text: item.projectName+ '-' + this.projTypesItems[item.type]+ '-' + item.area.areaName,
              value: item.id
            })
          })
          this.projectItems = projects;
        }
      });
    },
    getDepartmentList() {
      demand.getDepartmentList.r().then(({ data }) => {
        let d = data.data;
        if (data.result == 0) {
          let departments = [];
          _.forEach(d.dataList, (item, i)=>{
            departments.push({
              text: item.departmentsName,
              value: item.id
            })
          })
          this.departmentItems = departments;
        }
      });
    },
    getVersionDetails() {
      let opt = {
        id: this.$route.query.version
      }
      version.getVersionDetails.r(opt).then(({data})=>{
        let d = data.data;
        let demand = Object.assign({}, d.demand)
        let versionList = d.versionList.slice()
        if (data.result == 0) {
          demand.createTime = parseDate(demand.createTime);
          demand.deadTime = parseDate(demand.deadTime);
          versionList.forEach(item => {
            item.createTime = parseDateTime(item.createTime);
          });
          this.editItem = {demand, versionList};
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
</style>


